<template>
  <div class="activity-basic-info">
    <div class="cover">
      <img :src="activity.cover" alt="活动封面2" />
    </div>
    
    <div class="info">
      <h1 class="title">{{ activity.title }}</h1>
      <p class="description">{{ activity.description }}</p>
      
      <div class="meta-info">
        <div class="info-item location-item">
          <van-icon name="location-o" />
          <span class="text-ellipsis">{{ activity.location }}</span>
        </div>
        <div class="info-item time-item">
          <van-icon name="clock-o" />
          <div class="time-container">
            <div class="time-line">
              <div class="time-point start"></div>
              <div class="time-text">{{ formatTimeWithWeekDay(activity.startTime) }}</div>
            </div>
            <div class="vertical-line"></div>
            <div class="time-line">
              <div class="time-point end"></div>
              <div class="time-text">{{ formatTimeWithWeekDay(activity.endTime) }}</div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <van-icon name="friends-o" />
          <span>{{ activity.currentParticipants }}/{{ activity.maxParticipants }}人</span>
        </div>
        <div class="info-item">
          <van-icon name="gold-coin-o" />
          <span>{{ getFeeText }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import dayjs from 'dayjs';

const props = defineProps({
  activity: {
    type: Object,
    required: true
  }
});

const weekDayMap = ['日', '一', '二', '三', '四', '五', '六'];

const formatTimeWithWeekDay = (time: string) => {
  if (!time) return '';
  
  try {
    const date = dayjs(time);
    const weekDay = weekDayMap[date.day()];
    return date.format(`MM月DD日(周${weekDay}) HH:mm`);
  } catch (error) {
    console.error('Date formatting error:', error);
    return '';
  }
};

const getFeeText = computed(() => {
  if (props.activity.feeMode === 'FREE') return '免费';
  return `¥${props.activity.feeAmount}`;
});
</script>

<style scoped lang="scss">
.activity-basic-info {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;

  .cover {
    position: relative;
    width: 100%;
    height: 200px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .tag {
      position: absolute;
      top: 16px;
      right: 16px;
      padding: 4px 8px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      border-radius: 4px;
    }
  }

  .info {
    padding: 16px;

    .title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 8px;
    }

    .description {
      color: #666;
      margin: 0 0 16px;
      line-height: 1.5;
    }

    .meta-info {
      margin-top: 12px;
      
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        width: 100%;
        
        &:last-child {
          margin-bottom: 0;
        }

        .van-icon {
          font-size: 16px;
          margin-right: 8px;
          flex-shrink: 0;
          color: #666;
        }
      }

      .location-item {
        span {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.time-container {
  flex: 1;
  position: relative;
}

.time-line {
  display: flex;
  align-items: center;
  height: 20px;
  
  &:first-child {
    margin-bottom: 4px;
  }
}

.time-point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
  
  &.start {
    background-color: #4CAF50;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.6);
  }
  
  &.end {
    background-color: #FF5722;
    box-shadow: 0 0 3px rgba(255, 87, 34, 0.6);
  }
}

.vertical-line {
  position: absolute;
  left: 3px;
  top: 10px;
  width: 1px;
  height: 14px;
  background: rgba(0, 0, 0, 0.2);
}

.time-text {
  flex: 1;
  font-size: 14px;
  line-height: 20px;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>



